<template>
  <view class="flex items-center border border-solid border-[#007aff] rounded">
    <view
      v-for="(item, index) in values"
      :key="index"
      class="py-4 px-14 text-[#007aff] border-r border-solid border-[#007aff] last:border-r-0"
      :class="{ 'bg-[#007aff] !text-white': index === current }"
      @click="handlerClick(item, index)"
    >
      {{ item.name }}
    </view>
  </view>
</template>
<script setup>
defineProps({
  values: {
    type: Array,
    default: () => [],
  },
  current: {
    type: Number,
    default: 0,
  },
});

const emit = defineEmits(['clickItem']);
function handlerClick(item, index) {
  emit('clickItem', {
    ...item,
    currentIndex: index,
  });
}
</script>
